<script setup lang="ts">
import { pxChangeRem } from "@/utils";
import useLotNewsLive, { useLotNewsLiveRefs } from "./composables/useLotNewsLive";
defineOptions({
  name: "NewsLive"
});
withDefaults(
  defineProps<{
    id?: string | number;
  }>(),
  {
    id: ""
  }
);

const { fetchDataByType, router, route, loadMoreNews, resetNewsLive } =
  useLotNewsLive();
const { lotNewsList, lckNewsList, loadLotNewsState, loadLckNewsState, active } =
  useLotNewsLiveRefs();
onMounted(() => {
  fetchDataByType(active.value);
});
function handleChange(name: string | number, title: string) {
  console.log(name, title);
  fetchDataByType(name);
}

resetNewsLive();
const goToDetail = (item: any) => {
  resetNewsLive();
  router.push({
    path: `/news/detail/${item.id}`,
    query: { ...route.query }
  });
};
</script>

<template>
  <div class="bg-[#F7F7F7] p-0">
    <div
      class="bg-white rounded-20 w-full shadow-[0px_0px_4px_3px_rgba(213,213,213,0.25)]"
    >
      <van-tabs
        v-model:active="active"
        swipeable
        :border="true"
        class="rounded-20"
        :style="{
          '--van-tab-text-color': '#979797',
          '--van-tab-active-text-color': '#1871F5',
          '--van-tabs-bottom-bar-color': '#4590FF',
          '--van-tab-font-size': pxChangeRem(14),
          '--van-tab-line-height': pxChangeRem(22),
          '--van-tabs-bottom-bar-width': pxChangeRem(70)
        }"
        @change="handleChange"
      >
        <van-tab :title="$t('title02')">
          <ContList
            :list="lotNewsList"
            :loadMoreStatus="loadLotNewsState"
            @clickItem="goToDetail"
            @loadmore="loadMoreNews(0)"
          />
        </van-tab>
        <van-tab :title="$t('title07')">
          <ContList
            :list="lckNewsList"
            :loadMoreStatus="loadLckNewsState"
            @clickItem="goToDetail"
            @loadmore="loadMoreNews(1)"
          />
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<style scoped lang="scss">
:deep(.van-tabs__wrap) {
  @apply rounded-20;
}
</style>
